<template>
  <div class="layout-container">
    <!-- 子路由出口 -->
    <router-view />
    <!-- /子路由出口 -->

    <!-- 标签导航栏 -->
    <van-tabbar  route class="layout-tabbar">
      <van-tabbar-item to="/" icon="shouye" icon-prefix="toutiao">首页</van-tabbar-item>
      <van-tabbar-item to="/qa" icon="wenda" icon-prefix="toutiao">问答</van-tabbar-item>
      <van-tabbar-item to="/video" icon="shipin" icon-prefix="toutiao">视频</van-tabbar-item>
      <van-tabbar-item to="/user" icon="wode" icon-prefix="toutiao">{{ user ? '我的':'未登录' }}</van-tabbar-item>
    </van-tabbar>
    <!-- /标签导航栏 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'LayoutIndex',
  components: {},
  props: {},
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.layout-container {
  /deep/ .layout-tabbar {
    i.toutiao {
      font-size: 40px;
    }
    span.text {
      font-size: 20px;
    }
  }
}
</style>
